<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历   用于DOM树中遍历元素【理解：针对元素嵌套】
		 children()  功能：获取匹配元素集合中每个元素的子元素
		 parent()    功能：获取匹配元素集合中每个元素的父元素
		 
		 
		 
		 siblings()  功能：获取匹配元素集合中每个元素的所有兄弟元素

         
		 next()    功能：获取匹配元素集合中每个元素的下一个兄弟元素
		 prev()    功能：获取匹配元素集合中每个元素的上一个兄弟元素
		 
		 each()    功能：遍历匹配元素的集合---遍历所有子元素
		            语法糖：each(function(index,element){
						     
						注意：打印便利的值，不可以使用单双引号+拼接
						功能：获取到的元素，遍历元素内容
						
					})   
					                     index  下标 形参
										 element 元素 形参
		  -->
		  <style>
			  #container{
				  border: 1px solid skyblue;
				  margin: 10px;
				  padding: 17px;
			  }
			   #container div{
				  background-color: #eaadea;
				  padding: 10px;
				  margin: 10px;
			  }
			  button{
				  margin: 10px;
				  
			  }
		  </style>
		  <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<div id="container">
			<div class="box1" id="box">盒子1</div>
			<div class="box2" id="box">盒子2</div>
			<div class="box3" id="box">盒子3</div>
			<div class="box4" id="box">盒子4</div>
			<div class="box5" id="box">盒子5</div>
			<div class="box6" id="box">盒子6</div>
		</div>
		<button id="gc">获取子元素</button>
		<button id="gp">获取父元素</button>
		<button id="gs">获取兄弟元素</button>
		<button id="gn">获取下一个兄弟元素</button>
		<button id="gr">获取上一个兄弟元素</button>
		<button id="entire">遍历元素</button>
		
		
		<script>
			/* 1.点击 获取子元素 按钮   实现container下所有子元素添加背景色 */
			$("#gc").click(function(){
				$("#container").children().css("background-color","hotpink");
			    });
				
			$("#gp").click(function(){
				$("#container div").parent().css("background-color","lightblue");
			});	
			
			$("#gs").click(function(){
				$(".box4").siblings().css("color","greenyellow");
			});	
			
			$("#gn").click(function(){
				$(".box4").next().css("background-color","#ff6700");
			});	
			
			$("#gr").click(function(){
				$(".box6").prev().css({"width":"100px",
				"height":"100px","border-radius":"50%",
				"background-image":"url(../img/1.gif)",
				"box-shword":"3px 3px 7px gray","background-color":"yellow",
				"background-size":"100% 100%"
				});
			});	
			$("#entire").click(function(){
				$("#container div").each(function(i,e){ //i代表下标 e代表元素
					//每个盒子加文字
					$(e).text(`这是第${i+1}个盒子`);
				});
			});
			
			
		</script>
	</body>
</html>